<template>
    <div style="margin-left: 180px;padding-top: 15px;background-color: white;width: 1175px;">
        <div style="background-color: #006bb7;height: 50px;line-height:50px">
            <span style="color: white;font-size: 20px;margin-left: 20px;">现役选手</span>
        </div>
        <div style="background: rgb(33, 13, 70);height:40px;margin-bottom: 1px;display: flex;align-items: center;">
            <div style="margin-left: 20px;" class=".select_btn">
                <el-select v-model="searchObj.countryId" placeholder="以国籍筛选" size="mini" clearable  @change="changeCountry()">
                    <el-option
                    v-for="item in countryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div style="margin-left: 400px;" class=".select_btn">
                <el-select v-model="searchObj.clueId" placeholder="根据俱乐部查找" size="mini" clearable  @change="changeClue()">
                    <el-option
                    v-for="item in clueList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div style="width: 1175px; color: white;padding-bottom: 100px;">
            <el-table :header-cell-style="{background:'rgb(33, 13, 70)',color:'white'}" :data="playerList" stripe style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="荣誉">
                                <div v-for="honor of props.row.honorList" :key="honor.id">
                                    {{ honor.name }}
                                </div>
                                <!-- <span>{{ props.row.honorList }}</span> -->
                                    <!-- <el-table :data="props.row.honorList">
                                      <el-table-column  prop="id" label="姓名"></el-table-column>
                                    </el-table> -->
                            </el-form-item>
                        </el-form>
                    </template>
                    </el-table-column>
                <el-table-column prop="picture" label="照片" width="100" align="center">
                    <template slot-scope="scope">
                        <el-image :src='scope.row.picture' :preview-src-list="[scope.row.picture]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="160" align="center"></el-table-column>
                <el-table-column prop="countryValue" label="国籍" width="100" align="center"></el-table-column>
                <el-table-column prop="age" label="年龄" width="100" align="center"></el-table-column>
                <el-table-column prop="educationValue" label="学历" width="100" align="center"></el-table-column>
                <el-table-column prop="gameValue" label="游戏" width="130" align="center"></el-table-column>
                <el-table-column prop="placeValue" label="位置" width="100" align="center"></el-table-column>
                <el-table-column prop="honorIntegral" label="信誉积分" width="100" align="center"></el-table-column>
                <el-table-column prop="clueValue" label="俱乐部" width="100" align="center"></el-table-column>
                <el-table-column prop="biography" label="个人简介" align="center"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import playerApi from "@/api/player/player";
import countryApi from "@/api/country/country";
import clueApi from "@/api/clue/clue";
export default {
    data() {
        return {
            playerList: [],
            countryList: [],
            clueList: [],
            countryId: '',
            searchObj: {
                retireFlag: 1,
            }, //查询条件

        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        changeCountry(){
            this.searchObj.clueId = ''
            playerApi.getPlayerListByCondition(this.searchObj)
            .then(response =>{
                this.playerList = response.data
            })
        },
        changeClue(){
            console.log(this.searchObj.clueId)
            this.searchObj.countryId = ''
            playerApi.getPlayerListByCondition(this.searchObj)
            .then(response =>{
                this.playerList = response.data
            })
        },
        fetchData(){
            playerApi.getRetirePlayerList()
            .then(response => {
                this.playerList = response.data
            })
            countryApi.getCountryList()
            .then(response =>{
                this.countryList = response.data
            })
            clueApi.getClueList()
            .then(response =>{
                this.clueList = response.data
            })
        }
    },
}
</script>

<style>
#app{
    background: rgb(246, 246, 246);
    height: 100%;
    overflow: scroll;
  }
  .select_btn{
    position: absolute;
    top: 5px;
    right: 60px;
    }
    .select_btn .el-select-dropdown{
       border: none;
       background-color: rgb(246, 246, 246);
   }
   .el-input__inner{
       color: black;
       border-color: rgb(246, 246, 246);
       background-color: rgb(246, 246, 246);
   }
   .select_btn .el-select .el-input.is-focus .el-input__inner{
       border-color: rgb(246, 246, 246);
       background-color: rgb(246, 246, 246);
       color:rgb(246, 246, 246);
   }
   .select_btn .el-select-dropdown__item{
       color: rgb(246, 246, 246);;
   }

   .select_btn .el-select-dropdown__item.hover, 
   .el-select-dropdown__item:hover{
       color:white;
       background-color: rgb(124, 122, 122);
   }

   .el-select-dropdown__list{
        background-color: rgb(246, 246, 246);
        color: black
   }
   .el-select-dropdown__item.selected{
    color: black;
   }

</style>